import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import UnoCSS from 'unocss/vite'
import Inspect from 'vite-plugin-inspect'
import progress from 'vite-plugin-progress'
import legacy from '@vitejs/plugin-legacy'
import { visualizer } from 'rollup-plugin-visualizer'
import path from 'path'
import autoprefixer from 'autoprefixer';
import postcssPxtorem from 'postcss-pxtorem';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(), // 支持 Vue JSX
    vueDevTools(),

    // 自动导入 API
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'], // 自动导入 Vue 相关函数
      resolvers: [
        ElementPlusResolver(), // 自动导入 Element Plus 相关 API
        IconsResolver({
          prefix: 'Icon', // 自动导入图标组件
        }),
      ],
      dts: 'src/auto-imports.d.ts', // 生成自动导入的 TypeScript 声明文件
    }),

    // 自动导入组件
    Components({
      resolvers: [
        ElementPlusResolver(), // 自动导入 Element Plus 组件
        IconsResolver({
          enabledCollections: ['ep'], // Element Plus 图标集
        }),
      ],
      dts: 'src/components.d.ts', // 生成组件声明的 TypeScript 声明文件
    }),

    // 图标插件
    Icons({
      autoInstall: true, // 自动安装图标集
    }),

    // SVG 图标插件
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], // SVG 图标目录
      symbolId: 'icon-[dir]-[name]', // SVG 符号 ID 格式
    }),

    // UnoCSS 原子化 CSS
    UnoCSS(),

    // 构建进度条
    progress(),

    // 传统浏览器支持
    legacy({
      targets: ['defaults', 'not IE 11'], // 需要支持的目标浏览器
    }),

    // 包分析工具 (只在分析时启用)
    visualizer({
      open: true, // 构建完成后自动打开报告
      gzipSize: true, // 显示 gzip 压缩大小
      brotliSize: true, // 显示 brotli 压缩大小
    }),

    // 检查插件中间状态 (开发时使用)
    Inspect(),
  ],

  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '~': fileURLToPath(new URL('./node_modules', import.meta.url)),
    },
    extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'], // 可省略的扩展名
  },

  // 开发服务器配置
  server: {
    host: true, // 监听所有地址
    port: 5173, // 开发服务器端口
    open: true, // 启动时自动打开浏览器
    proxy: { // 代理配置
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },

  // 构建配置
  build: {
    target: 'esnext', // 构建目标
    minify: 'terser', // 代码压缩工具
    terserOptions: { // terser 压缩配置
      compress: {
        drop_console: true, // 移除 console
        drop_debugger: true, // 移除 debugger
      },
    },
    rollupOptions: { // Rollup 配置
      output: {
        manualChunks: { // 手动分包
          vue: ['vue', 'vue-router', 'pinia'],
          elementPlus: ['element-plus'],
        },
      },
    },
    chunkSizeWarningLimit: 2000, // 分块大小警告限制 (KB)
  },

  // CSS 相关配置
  // css: {
  //   preprocessorOptions: {
  //     scss: {
  //       additionalData: `@use "@/styles/variables.scss" as *;`, // 全局 SCSS 变量
  //     },
  //   },
  //   postcss: { // PostCSS 配置
  //     plugins: [
  //       autoprefixer, // 自动添加浏览器前缀
  //       postcssPxtorem({
  //         rootValue: 16,
  //         propList: ['*'],
  //       }),,
  //     ],
  //   },
  // },

  // 优化配置
  optimizeDeps: {
    include: ['vue', 'vue-router', 'pinia', 'element-plus'], // 预构建依赖
  },
})
